<template>
  <div id="main" class="hander-car">
    <div class="store-content">
      <div class="cart-box">
        <div class="title">
          <h2>购物清单</h2>
        </div>
        <div class="cart-inner">
          <div class="empty-label" v-if="!cartList.length">
            <h3>您的购物车中还没有商品</h3>
            <router-link to="/" class="link">现在选购</router-link>
          </div>
          <div>
            <div class="cart-table-title"  v-if="cartList.length">
              <span class="name">商品信息</span>
              <span class="operation">操作</span>
              <span class="subtotal">小计</span>
              <span class="num">数量</span>
              <span class="price">单价</span>
            </div>
            <div class="cart-table">
              <div class="cart-group">
                <!--购物列表-->
                <div
                  class="cart-top-items"
                  v-for="(item, index) in cartList"
                  :key="index"
                >
                  <div class="cart-items">
                    <div class="items-choose">
                      <span
                        :class="[
                          'blue-checkbox-new',
                          { 'checkbox-on': item.ischeck },
                        ]"
                        @click="handleCheck(index)"
                      >
                        <a></a>
                      </span>
                    </div>
                    <div class="items-thumb">
                      <img :src="item.image" />
                      <a href="javascript:;" target="_blank"></a>
                    </div>
                    <div class="name hide-row">
                      <div class="name-table">
                        <a href="javascript:;" target="_blank">
                          {{ item.title }}
                        </a>
                        <ul class="attribute">
                          <li>{{ item.detail.color_name }}</li>
                        </ul>
                      </div>
                    </div>
                    <div class="operation">
                      <a class="items-delete-btn" @click="handleDel(index)"></a>
                    </div>
                    <div class="subtotal">¥ {{ item.num * item.price }}</div>
                    <div class="item-cols-num">
                      <div class="select js-select-quantity">
                        <span
                          :class="['down', { 'down-disabled': item.num <= 1 }]"
                          @click="handleNum(index, false)"
                          >-</span
                        >
                        <span class="num">
                          <input
                            :value="item.num"
                            type="text"
                            style="display: inline-block"
                          />
                        </span>
                        <span
                          :class="[
                            'up',
                            { 'up-disabled': item.num >= item.limit_num }
                          ]"
                          @click="handleNum(index)"
                          >+</span
                        >
                      </div>
                    </div>
                    <div class="price">¥ {{ item.price }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="cart-bottom-bg fix-bottom" v-if="cartList.length">
          <div class="cart-bar-operation">
            <div>
              <div class="choose-all js-choose-all">
                <span
                  :class="[
                    'blue-checkbox-new',
                    { 'checkbox-on': allInfo.allCheck },
                  ]"
                  @click="handleAllCheck"
                  ><a></a
                ></span>
                全选
              </div>
              <div class="delete-choose-goods">删除选中的商品</div>
            </div>
          </div>
          <div class="shipping">
            <div class="shipping-box">
              <div class="shipping-total shipping-num">
                <h4 class="">已选择 <i>{{allInfo.checkNum}}</i> 件商品</h4>
                <h5>共计 <i>{{allInfo.allNum}}</i> 件商品</h5>
              </div>
              <div class="shipping-total shipping-price">
                <h4 class="">应付总额：<span>￥</span><i>{{allInfo.checkPrice}}</i></h4>
                <h5 class="shipping-tips">应付总额不含运费</h5>
              </div>
            </div>
            <span
              class="jianguo-blue-main-btn big-main-btn js-checkout"
              :class="{'disabled-btn':!allInfo.checkNum}"
              >
                <router-link :to="allInfo.checkNum==0?'':'/checkout'">现在结算</router-link>
              </span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    cartList() {
      return this.$store.state.cart.cartList;
    },
    allInfo() {
      return this.$store.getters["cart/allInfo"];
    },
  },
  methods: {
    handleCheck(idx) {
      this.$store.commit("cart/cartCheckMut", idx);
    },
    handleAllCheck() { //全选事件
      this.$store.commit("cart/cartAllCheckMut", this.allInfo.allCheck);
    },
    handleNum(idx, bool) { //数量加减
      this.$store.commit("cart/cartNumMut", { idx, bool });
    },
    handleDel(idx){ 
      this.$store.commit("cart/cartDelMut",idx)
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/cart.css");
</style>
